<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
  <title>字典列表</title>
  <th:block th:include="common/public::layui"></th:block>
</head>
<body>
<div class="layui-col-md12" style="text-align: center">
  <form class="layui-form layui-form-pane" action="" style="margin-top: 15px;display: inline-block">
    <div class="layui-form-item">
      <label class="layui-form-label">字典查询</label>
      <div class="layui-input-inline" style="margin-right: 0">
        <input type="text" name="title" id="title" placeholder="请输入键名" autocomplete="off" class="layui-input"/>
        <input type="hidden" name="answerType" class="layui-input" th:value="${answerType}"/>
      </div>
      <div class="layui-input-inline" style="width: auto">
        <button class="layui-icon layui-icon-search layui-btn" lay-submit="" lay-filter="*"></button>
      </div>
    </div>
  </form>
</div>

<div class="layui-col-lg-offset2 layui-col-lg8 layui-col-md12">
  <table class="layui-table" lay-data="{page:true, id:'table',toolbar: '#toolbar',defaultToolbar:[]}" lay-filter="table">
    <thead>
    <tr>
      <th lay-data="{type:'checkbox',width:50}"></th>
      <th lay-data="{field:'id',width:100}">ID</th>
      <th lay-data="{field:'code',minWidth:200}">编码</th>
      <th lay-data="{field:'dicKey',minWidth:200}">键名</th>
      <th lay-data="{field:'dicValue',minWidth:300}">键值</th>
      <th lay-data="{toolbar:'#tool',width:120}">操作</th>
    </tr>
    </thead>
  </table>
</div>
<script type="text/html" id="tool">
  <a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
  <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
</script>
<script type="text/html" id="toolbar">
  <a class="layui-btn layui-btn-sm" lay-event="add">新增</a>
  <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">批量删除</a>
</script>
<script th:inline="javascript">
  var table;
  layui.use(['jquery', 'table', 'form'], function () {
    var answerType = [[${answerType}]];
    var $ = layui.$;
    table = layui.table;
    var form = layui.form;
    //初始加载
    loadTable({});
    //行工具栏点击事件
    table.on('tool(table)', function (obj) {
      if (obj.event == 'update') {
        layer.open({
          title: '编辑字典',
          type: 2,
          content: prefixUrl + '/dic/form/' + obj.data.id,
          area: ['350px', '300px']
        });
      } else if (obj.event == 'delete') {
        layer.confirm('确定要删除该项吗？', {icon: 3, title: '提示'}, function (index) {
          var data = {};
          data['list[0].id'] = obj.data.id;
          $.post(prefixUrl + '/dic/delete', data, function (res) {
            if (res.status == 200) {
              layer.msg(res.msg, {icon: 1});
              table.reload('table');
            } else {
              layer.alert(res.msg, {icon: 2, anim: 6});
            }
          }, 'json');
          layer.close(index);
        });
      }
    });
    //表头工具栏点击事件
    table.on('toolbar(table)', function (obj) {
      switch (obj.event) {
        case 'add':
          layer.open({
            title: '新增字典',
            type: 2,
            content: prefixUrl + '/dic/form',
            area: ['350px', '300px']
          });
          break;
        case 'delete':
          var data = table.checkStatus('table').data;
          var bean = {};
          $.each(data, function (index, elem) {
            bean['list[' + index + '].id'] = elem.id;
          });
          if (data.length > 0) {
            layer.confirm('确定要删除选中的项吗？', {icon: 3, title: '提示'}, function (index) {
              $.post(prefixUrl + '/dic/delete', bean, function (res) {
                if (res.status == 200) {
                  layer.msg(res.msg, {icon: 1});
                  table.reload('table');
                } else {
                  layer.alert(res.msg, {icon: 2, anim: 6});
                }
              }, 'json');
              layer.close(index);
            });
          } else {
            layer.msg('未选中任何项', {icon: 7, anim: 6});
          }
      }
    });
    //  表单提交事件
    form.on('submit(*)', function (data) {
      loadTable(data.field);
      return false;
    });

    //表格加载
    function loadTable(data) {
      table.reload('table', {
        url: prefixUrl + '/dic/getByFields',
        where: data,
        done: function (res, curr, count) {
          //合并编码行
          mergeRow($, 'code');
        }
      });
    }
  });
</script>
</body>
</html>